<template>
  <div class="container">
    <div class="tab">
      <div class="tab-item"
           :class="{'active':item.type == type}"
           v-for="(item, index) in tab_arr"
           :key="index"
           @tap="toggle_tab(item)">
        <div class="msg">{{item.msg}}</div>
      </div>
    </div>
    <div class="content">
      <scroll-view scroll-y
                   style="height:100%"
                   scroll-with-animation>
        <goods-list v-if="type==1"
                    @show_action="show_action"
                    :list="list_data"></goods-list>
        <projects-list v-else
                       @show_action="show_action"
                       :list="list_data"></projects-list>

      </scroll-view>

    </div>
    <div class="mask"
         v-if="show_mask"
         @tap="close_mask()">
      <div class="action-area">
        <div class="actions">
          <div class="action-item">
            <div class="collection-btn"
                 @tap.stop="collect()">
              <img :src="base_url+'/mp_2.9/collection.png'"
                   v-if="base_url"
                   alt=""
                   class="img">
              <div class="msg">
                收藏
              </div>
            </div>
          </div>
          <div class="action-item">
            <div class="del-btn"
                 @tap.stop="del()">
              <img :src="base_url+'/mp_2.9/del.png'"
                   v-if="base_url"
                   alt=""
                   class="img">
              <div class="msg">
                删除
              </div>
            </div>
          </div>
        </div>
        <div class="close"
             @tap.stop="close_mask()">
          取消
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import common from '@/assets/js/mmk_common.js'
import goodsList from '@/components/footmark/goods_list'
import projectsList from '@/components/footmark/projects_list'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      type: 1,
      tab_arr: [
        {
          msg: '商品',
          type: 1
        },
        {
          msg: '项目',
          type: 2
        },
      ],
      list_data: [],
      show_mask: false,
      action_id: 0,
      action_time: 0
    };
  },
  methods: {
    toggle_tab (item) {
      this.list_data = []
      this.type = item.type
      this.get_footmark()
    },
    // 获取足迹列表
    get_footmark () {
      wx.showLoading({
        title: '加载中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('/api/v4_2/foot_print/list', {
        type: this.type,
        user_id: wx.getStorageSync('user_id') || 0
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == '0' ) {
          res.data.forEach(val => {
            val.time_msg = new Date(val.time * 1000).Format("yyyy年MM月dd日")
          });
          this.list_data = res.data
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 关闭遮罩
    close_mask () {
      this.show_mask = false
    },
    // 打开操作列表
    show_action (item) {
      this.action_id = item.id
      this.action_time = item.time
      this.show_mask = true
    },
    //收藏
    collect () {
      let that = this;
      common.fly_post(
        "api/v4_2/foot_print/collect",
        {
          type: this.type,
          id: this.action_id
        },
        response => {
          let res = response.data;
          let that = this
          if (res.status_code == 0) {
            that.show_mask = false
            wx.showToast({
              title: "收藏成功", //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {

              }
            });
          } else {
            that.show_mask = false
            wx.showToast({
              title: res.message, //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
              }
            });
          }
        }
      );
    },
    // 删除
    del () {
      let that = this
      common.fly_post('api/v4_2/foot_print/delete', {
        id: this.action_id,
        time: this.action_time
      }, response => {
        let res = response.data;
        if (res.status_code == 0) {
          wx.showToast({
            title: "删除成功", //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                that.show_mask = false
                that.get_footmark()
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              that.show_mask = false
            }
          });
        }
      })
    }
  },
  components: {
    goodsList, projectsList
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "足迹"
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.get_footmark()
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  padding-bottom: 53px;
  .tab {
    width: 100%;
    height: 42px;
    background-color: #fff;
    display: flex;
    .tab-item {
      flex: 1;
      position: relative;
      .msg {
        font-size: 16px;
        line-height: 42px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        -webkit-background-clip: text;
      }
      &:first-of-type {
        .msg {
          position: absolute;
          right: 52px;
        }
      }
      &:last-of-type {
        .msg {
          position: absolute;
          left: 52px;
        }
      }
      &.active {
        .msg {
          color: rgba(246, 70, 101, 1);
        }
      }
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
  }
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.5);
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 20;
    .action-area {
      width: 100%;
      position: absolute;
      bottom: 0;
      .actions {
        width: 100%;
        height: 70px;
        background: rgba(242, 242, 242, 1);
        display: flex;
        .action-item {
          flex: 1;
          position: relative;
          .collection-btn,
          .del-btn {
            width: 40px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            .img {
              width: 40px;
              height: 40px;
              display: block;
              margin-top: 7px;
            }
            .msg {
              width: 100%;
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 17px;
              letter-spacing: 3px;
              text-align: center;
              margin-top: 3px;
            }
          }
          .collection-btn {
            right: 50px;
          }
          .del-btn {
            left: 50px;
          }
        }
      }
      .close {
        width: 100%;
        height: 44px;
        background: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 44px;
        letter-spacing: 4px;
        text-align: center;
      }
    }
  }
}
</style>
